<template>
  <div id="app" class="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>

</template>

<script>
import nprogress from 'nprogress'
nprogress.configure({ showSpinner: false })

var e = '%c'

var n = 'color:red;text-shadow:5px 5px 2px #fff, 5px 5px 2px #373E40, 5px 5px 5px #A2B4BA, 5px 5px 10px #82ABBA;font-weight:bolder;font-size:16px'

var r = 'color:#495A80;text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 1px 0 #bbb;font-size:14px'

console.info(e + '你好呀！！！ 很高兴你观看我的博客 ', n)

console.info(e + '和我一起交流前端技术！ QQ：810203055\r\n', r)

export default {
  mounted () {
    window.addEventListener('scroll', this.handleScroll) // 监听滚动条事件
  },
  methods: {
    handleScroll () {
      // 屏幕剩余的高度
      var surplus =
        document.documentElement.scrollHeight -
        document.documentElement.clientHeight
      // 当前滑动高度
      var scrollY = document.documentElement.scrollTop
      var back = document.querySelector('.back_top')
      back.onclick = function () {
        var s = scrollY / 500 * 25 // 路程/时间=s *25每隔25ms秒 动的路程
        var st = setInterval(function () {
          scrollY -= s
          if (scrollY <= 0) {
            scrollY = 0 // 当l<=0时，设置l=0
            clearInterval(st)
          }
          document.documentElement.scrollTop = scrollY
        }, 10)
      }
      if (scrollY >= 888) {
        // 显示滚动
        back.style.display = 'block'
      } else {
        // 不显示滚动
        back.style.display = 'none'
      }

      // 当前位置百分比小数
      var coorY = scrollY / surplus
      // 设置导航栏，这里使用NProgress.set() 动态更改进度条
      nprogress.set(coorY)
    }
  }
}
</script>

<style>
@import "./assets/global.css";
.app{
  height: 100%;
  width: 100%;
}
#nprogress .bar{
  background: #3fdb9f !important;
}
#nprogress .peg {
  box-shadow: 0 0 10px #00000000, 0 0 5px #00000000 !important
}
.back_top{
  position: fixed;
  bottom: 130px;
  right: 50px;
  display: none;
  z-index: 9999999;
  line-height: 44px;
  height: 44px;
  width: 44px;
  border-radius: 50%;
  background: #fff;
  font-size: 0;
  color: #b4b4c1;
  text-align: center;
}
.back_top img {
  margin-top: 12px;
  height: 24px;
}
.back_top:hover{
  font-size: 14px;
  cursor: pointer;
  color: #b4b4c1;
}
.back_top:hover img{
  display: none;
}
</style>
